<template>
  <div class="wrap">
    <div
      @click="() => gotoList(item)"
      :key="index"
      v-for="(item, index) in cardList"
      class="card"
    >
      {{ item.title }}
    </div>
    <div class="make" @click="make">开始做题</div>
  </div>
</template>
<script setup lang="ts">
const cardList = [
  {
    title: "利弊型",
    type: 1,
  },
  {
    title: "议论文",
    type: 2,
  },
  {
    title: "谚语类",
    type: 3,
  },
  {
    title: "图画类",
    type: 4,
  },
  {
    title: "图标类",
    type: 5,
  },
  {
    title: "书信类",
    type: 6,
  },
];
const gotoList = (record) => {
  uni.navigateTo({ url: `/pages/list/index?id=${record.type}` });
};
const make = () => {
  uni.navigateTo({ url: "/pages/index/index" });
};
</script>
<style lang="scss">
.wrap {
  padding: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.card {
  width: 45%;
  height: 200rpx;
  text-align: center;
  line-height: 200rpx;
  background-color: #fff;
  font-size: 32rpx;
  font-weight: bold;
  margin: 20rpx 10rpx;
  border-radius: 10rpx;
  color: #fff;
  box-shadow: 0 0 20rpx 1rpx #ddd;
  display: inline-block;
  &:nth-child(1) {
    background: linear-gradient(to right, #ff6666, #ee0979);
  }
  &:nth-child(2) {
    background: linear-gradient(to right, #38d810, #3d794c);
  }
  &:nth-child(3) {
    background: linear-gradient(to right, #884b4b, #c90865);
  }
  &:nth-child(4) {
    background: linear-gradient(to right, #5f67da, #8b0848);
  }
  &:nth-child(5) {
    background: linear-gradient(to right, #abf106, #ee0979);
  }
  &:nth-child(6) {
    background: linear-gradient(to right, #ff6666, #680836);
  }
}
.make {
  width: 100%;
  height: 200rpx;
  text-align: center;
  line-height: 200rpx;
  background-color: #fff;
  font-size: 32rpx;
  font-weight: bold;
  margin: 20rpx 10rpx;
  border-radius: 10rpx;
  box-shadow: 0 0 20rpx 5rpx #ddd;
  display: inline-block;
  color: #fff;
  font-size: 40rpx;
  background: radial-gradient(
    circle at 50% 50%,
    #3805f0 0%,
    #5009f5 5%,
    #5009f5 45%,
    #5009f5 60%,
    #0c4ad1 90%
  );
}
</style>
